<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .container {
            padding: 20px;
        }
        .search-form {
            margin-bottom: 20px;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
        .menu-level-1 { padding-left: 20px; }
        .menu-level-2 { padding-left: 40px; }
        .menu-level-3 { padding-left: 60px; }
        /* 可根据需要添加更多层级样式 */
    </style>
</head>
<body>
<div id="app" class="container">
    <el-card>
        <div slot="header">
            <span>菜单管理</span>
            <el-button style="float: right;" type="primary" @click="showAddDialog">新增菜单</el-button>
        </div>

        <!-- 搜索表单 -->
        <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="菜单名称">
                <el-input v-model="searchForm.menuName" placeholder="请输入菜单名称"></el-input>
            </el-form-item>
            <el-form-item label="父级菜单">
                <el-select v-model="searchForm.parentId" placeholder="请选择父级菜单" clearable>
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="顶级菜单" :value="0"></el-option>
                    <el-option
                            v-for="menu in hierarchicalMenus"
                            :key="menu.menuId"
                            :label="menu.menuName"
                            :value="menu.menuId"
                            :class="'menu-level-' + menu.level">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 菜单表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="menuId" label="菜单ID" width="80"></el-table-column>
            <el-table-column prop="menuName" label="菜单名称"></el-table-column>
            <el-table-column prop="menuUrl" label="菜单URL"></el-table-column>
            <el-table-column prop="parentName" label="父级菜单"></el-table-column>
            <el-table-column prop="sortOrder" label="排序" width="80"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.current"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
        <el-form :model="menuForm" :rules="rules" ref="menuForm" label-width="100px">
            <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model="menuForm.menuName"></el-input>
            </el-form-item>
            <el-form-item label="菜单URL" prop="menuUrl">
                <el-input v-model="menuForm.menuUrl"></el-input>
            </el-form-item>
            <el-form-item label="父级菜单" prop="parentId">
                <el-select v-model="menuForm.parentId" placeholder="请选择父级菜单" style="width: 100%">
                    <el-option label="顶级菜单" :value="0"></el-option>
                    <el-option
                            v-for="menu in hierarchicalMenus"
                            :key="menu.menuId"
                            :label="menu.menuName"
                            :value="menu.menuId"
                            :disabled="menu.menuId === menuForm.menuId"
                            :class="'menu-level-' + menu.level">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="sortOrder">
                <el-input-number v-model="menuForm.sortOrder" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="menuForm.remark"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</div>

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                searchForm: {
                    menuName: '',
                    parentId: null
                },
                tableData: [],
                hierarchicalMenus: [], // 存储层级菜单数据
                pagination: {
                    current: 1,
                    pageSize: 10,
                    total: 0
                },
                dialogVisible: false,
                dialogTitle: '新增菜单',
                menuForm: {
                    menuId: null,
                    menuName: '',
                    menuUrl: '',
                    parentId: 0,
                    sortOrder: 0,
                    remark: ''
                },
                rules: {
                    menuName: [
                        { required: true, message: '请输入菜单名称', trigger: 'blur' }
                    ],
                    menuUrl: [
                        { required: true, message: '请输入菜单URL', trigger: 'blur' }
                    ],
                    parentId: [
                        { required: true, message: '请选择父级菜单', trigger: 'change' }
                    ]
                }
            }
        },
        created() {
            this.fetchData();
        },
        methods: {
            // 获取菜单数据
            fetchData() {
                // 确保先获取层级菜单数据
                this.fetchHierarchicalMenus().then(() => {
                    const params = {
                        menuName: this.searchForm.menuName,
                        parentId: this.searchForm.parentId,
                        pageSize: this.pagination.pageSize,
                        current: this.pagination.current
                    };

                    axios.get('/sysMenu/page', { params })
                        .then(response => {
                            const pageData = response.data;
                            this.tableData = pageData.records;
                            this.pagination.total = pageData.total;

                            // 处理父级菜单名称显示
                            this.tableData.forEach(item => {
                                if (item.parentId === 0) {
                                    item.parentName = '顶级菜单';
                                } else {
                                    const parentMenu = this.hierarchicalMenus.find(menu => menu.menuId === item.parentId);
                                    item.parentName = parentMenu ? parentMenu.menuName.replace(/^[　├─]+/, '') : '未知';
                                }
                            });
                        })
                        .catch(error => {
                            this.$message.error('获取菜单数据失败: ' + error.message);
                        });
                });
            },

            // 获取层级菜单数据
            fetchHierarchicalMenus() {
                return new Promise((resolve, reject) => {
                    axios.get('/sysMenu/getHierarchicalMenus')
                        .then(response => {
                            this.hierarchicalMenus = response.data;
                            resolve();
                        })
                        .catch(error => {
                            this.$message.error('获取层级菜单失败: ' + error.message);
                            reject(error);
                        });
                });
            },

            // 搜索
            handleSearch() {
                this.pagination.current = 1;
                this.fetchData();
            },

            // 重置搜索
            resetSearch() {
                this.searchForm = {
                    menuName: '',
                    parentId: null
                };
                this.handleSearch();
            },

            // 分页大小改变
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.fetchData();
            },

            // 当前页改变
            handleCurrentChange(val) {
                this.pagination.current = val;
                this.fetchData();
            },

            // 显示新增对话框
            showAddDialog() {
                this.dialogTitle = '新增菜单';
                this.menuForm = {
                    menuId: null,
                    menuName: '',
                    menuUrl: '',
                    parentId: 0,
                    sortOrder: 0,
                    remark: ''
                };
                this.dialogVisible = true;
                this.$nextTick(() => {
                    this.$refs.menuForm.clearValidate();
                });
            },

            // 编辑菜单
            handleEdit(row) {
                this.dialogTitle = '编辑菜单';
                this.menuForm = {
                    menuId: row.menuId,
                    menuName: row.menuName,
                    menuUrl: row.menuUrl,
                    parentId: row.parentId,
                    sortOrder: row.sortOrder,
                    remark: row.remark
                };
                this.dialogVisible = true;
                this.$nextTick(() => {
                    this.$refs.menuForm.clearValidate();
                });
            },

            // 提交表单
            submitForm() {
                this.$refs.menuForm.validate(valid => {
                    if (valid) {
                        if (this.menuForm.menuId) {
                            // 更新
                            axios.put('/sysMenu/update', this.menuForm)
                                .then(response => {
                                    const result = response.data;
                                    if (result.success) {
                                        this.$message.success(result.msg);
                                        this.dialogVisible = false;
                                        this.fetchData();
                                        this.fetchHierarchicalMenus(); // 刷新菜单下拉选项
                                    } else {
                                        this.$message.error(result.msg);
                                    }
                                })
                                .catch(error => {
                                    this.$message.error('更新菜单失败: ' + error.message);
                                });
                        } else {
                            // 新增
                            axios.post('/sysMenu/add', this.menuForm)
                                .then(response => {
                                    const result = response.data;
                                    if (result.success) {
                                        this.$message.success(result.msg);
                                        this.dialogVisible = false;
                                        this.fetchData();
                                        this.fetchHierarchicalMenus(); // 刷新菜单下拉选项
                                    } else {
                                        this.$message.error(result.msg);
                                    }
                                })
                                .catch(error => {
                                    this.$message.error('新增菜单失败: ' + error.message);
                                });
                        }
                    } else {
                        return false;
                    }
                });
            },

            // 删除菜单
            handleDelete(row) {
                this.$confirm('确认删除该菜单吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/sysMenu/delete', { params: { menuId: row.menuId } })
                        .then(response => {
                            const result = response.data;
                            if (result.success) {
                                this.$message.success(result.msg);
                                this.fetchData();
                                this.fetchHierarchicalMenus(); // 刷新菜单下拉选项
                            } else {
                                this.$message.error(result.msg);
                            }
                        })
                        .catch(error => {
                            this.$message.error('删除菜单失败: ' + error.message);
                        });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            }
        }
    });
</script>
</body>
</html>